<template>
  <div>
    <el-col :span="8">
      <el-form-item label="楼层名称" prop="floorName" :rules="[{ required: true, message: '请输入楼层名称', trigger: 'blur' }]">
        <el-input maxlength="200" v-model="building.floorName" placeholder="请输入" clearable></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8" style="height: 40px">
      <el-form-item label="所在建筑层数" prop="buildingStorey" :rules="[{ required: true, message: '请输入所在建筑层数', trigger: 'blur' }]">
        <el-input v-model="building.buildingStorey" type="number"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="楼层编码" prop="floorCoding">
        <el-input maxlength="200" readonly v-model="building.floorCoding" placeholder="自动生成"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="本层使用面积" prop="useArea" :rules="[{ required: true, message: '请输入本层使用面积', trigger: 'blur' }]">
        <el-input type="number" maxlength="200" v-model="building.useArea" placeholder="请输入">
          <template slot="append">
            <span style="color: #333">㎡</span>
          </template>
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="本层分摊面积" prop="shareArea" :rules="[{ required: true, message: '请输入本层分摊面积', trigger: 'blur' }]">
        <el-input type="number" maxlength="200" v-model="building.shareArea" placeholder="请输入">
          <template slot="append">
            <span style="color: #333">㎡</span>
          </template>
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="本层建筑面积" prop="buildingArea" :rules="[{ required: true, message: '请输入本层建筑面积', trigger: 'blur' }]">
        <el-input type="number" maxlength="200" v-model="building.buildingArea" placeholder="请输入">
          <template slot="append">
            <span style="color: #333">㎡</span>
          </template>
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="本层层高" prop="theLevel" :rules="[{ required: true, message: '请输入本层层高', trigger: 'blur' }]">
        <el-input type="number" maxlength="200" v-model="building.theLevel" placeholder="请输入"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="本层使用系数" prop="useFactory" :rules="[{ required: true, message: '请输入本层使用系数', trigger: 'blur' }]">
        <el-input type="number" maxlength="200" v-model="building.useFactory" placeholder="请输入">
          <template slot="append">
            <span style="color: #333">%</span>
          </template>
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="本层CAD面积" prop="cadArea" :rules="[{ required: true, message: '请输入本层CAD面积', trigger: 'blur' }]">
        <el-input type="number" maxlength="200" v-model="building.cadArea" placeholder="请输入"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="规划用途" prop="planUse" :rules="[{ required: true, message: '请选择规划用途', trigger: 'blur' }]">
        <el-select v-model="building.planUse" clearable>
          <el-option v-for="item in purposeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="保修期">
        <el-date-picker v-model="building.warrantyTime" type="date" value-format="timestamp" clearable placeholder="请选择"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="楼层规划图" prop="remark" :rules="{required: true, message: '请上传图片', trigger: 'change'}">
        <UploadAlbum :height="150" :width="150"  v-bind:cover-url.sync="building.remark"></UploadAlbum>
      </el-form-item>
    </el-col>
  </div>
</template>

<script>
  export default {
    name: 'floor-forms',
    props: {
        purposeList:{
            type:Array,
            default: () => {
                return []
            }
        },
        building:{
            type:Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
      return {};
    },
    methods: {},
  };
</script>

<style lang="scss" scoped></style>
